<template>
  <div class="crud-box">
    <avue-crud :option="option"
               :table-loading="loading"
               :data="dataList"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <div style="color: #8CAAE0">已选人员</div>
      </template>
    </avue-crud>

    <div class="bottom-box" v-if="dataList.length>0">
      <el-button v-if="dataList.length>0" class="bottom-btn" type="danger" size="small" @click="remove()">确认移除</el-button>
    </div>

  </div>
</template>

<script>
import ZlDialog from "@/components/zl-dialog/zl-dialog";
import  option  from "../option/usertable";
import {excludePage} from "@/api/prison/cabinetuser";
import {remove} from "@/api/prison/cabinetcell";
import {mixins} from '@/mixins/crud'
export default {
  name: "right-table",
  components: {ZlDialog},
  mixins: [mixins],

  data() {
    return {
      loading: true,
      option: option,
      dataList: [],
      userIds:'',
      cellId:'',
      events: {
        getList: excludePage,
      },
    };
  },



  methods: {

    loadPage(cellId,userIds){
      this.cellId = cellId;
      this.userIds = userIds;
      this.onLoad(this.page)
    },

    remove(){
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return "";
      }

      remove(this.cellId,this.ids).then(res=>{
        if (res.data.code===200){
          this.$emit("onload")
          this.$message.success('删除成功');
        }
      })
    },

    onLoad(page, params = {}) {
      this.query.userIds = this.userIds
      this.query.exclude = false;
      this.loading = true;
      this.events.getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.dataList = data.records;
        this.page.total = data.total;
        this.loading = false;
        this.selectionClear();
      });
    },

  }

}
</script>

<style scoped lang="scss">


.bottom-box{
  width: 100%;
  text-align: center;
  margin-top: 50px;
  .bottom-btn{
    width: 80%;
  }
}
::v-deep .el-col{
  margin-bottom: 0 !important;
}


::v-deep .avue-crud__pagination{
  padding: 25px 5px 0 20px
}


</style>
